<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        1.引入
        可以下载本地 或者连接网上
     -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 2.插值表达式 -->
        <!-- <h1>欢迎来到-- >{{name}}</h1></h1> -->
        <!-- 3.显示数据(v-text和v-html) 
            v-text：把数据当作纯文本显示.
            v-html：遇到html标签,会正常解析
            ​v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.
​            当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。
           ​ 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

        -->
        <!-- <span v-text="name"></span>
        <span v-html="htmlf"></span> -->
        <!-- 4.​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化. -->
        <!-- 4.1文本框 -->
        <!-- 用户名：<input   type="text" v-model="username"></input> -->
        <!-- 4.2单个复选框 -->
        <!-- <input type="checkbox" v-model="agree" name="" id=""><br> -->
        <!-- 4.3多个复选框 -->
        <!-- <input type="checkbox" value="Java" v-model="language">Java <br>
        <input type="checkbox" value="Python" v-model="language">Python <br>
        <input type="checkbox" value="C++" v-model="language">C++ <br> -->
        <!-- 4.4表单数据提交 -->

        <!-- 5.事件处理 -->
        <!-- 5.1事件绑定 -->
        <!-- <button @click="show">点我</button> -->
        <!-- 5.2事件修饰符 -->
        <!-- .stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
            .prevent ：阻止默认事件发生
            .capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
            .self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
            .once ：只执行一次
        -->
        <!-- 6.循环遍历 -->
        <!-- 6.1遍历数组
        v-for="(item,index) in items"
        -->
        <!-- <ul>
            <li v-for="(user,index) in users">
                {{index}}---{{user.name}}---{{user.age}}---{{user.gender}}
            </li>
        </ul> -->
        <!-- 6.2遍历对象
        v-for="value in object"
        v-for="(value,key) in object"
        v-for="(value,key,index) in object"

        -->
        <!-- <ul>
            <li v-for="(value,key,index) in person">
                {{index}}---{{key}}---{{value}}
            </li>
        </ul> -->
        <!-- <button @click="add">添加</button>
        <ul>
            <li v-for="name in list" :key="name">
                <input type="checkbox" name="" id="">{{name}}    
            </li>
        </ul> -->




    </div>

</body>
<script>

    var app = new Vue({
        //vue接管div标签
        el: '#app',
        data: {
            // name:"VUExuexi",
            // htmlf:"<h1>大标题</h1>",
            // username:"张三",
            // agree:true,
            // language:["Java","Python"]
            // users:[
            //     {"name":"白卓冉","age":8,"gender":"男"},
            //     {"name":"白大锅","age":12,"gender":"女"},
            //     {"name":"白仙女","age":4,"gender":"男"}
            // ],
            // person:{name:"白打过",age:3,address:"中国"}
            list:["孙悟空","唐僧","猪八戒"]
        },
        methods: {
            // show() {
            //     alert("点我")
            // }
            add(){
                this.list.unshift("沙和尚")
            }
        }

    });
</script>

</html>